<d-button (click)="getRemoteData()" style="margin-right: 5px">Request Data</d-button>
<d-button bsStyle="common" (click)="toggleColOptions()">Config Columns</d-button>
<br />
<br />
<d-data-table
  dLoading
  [dataSource]="remoteDataSource"
  [tableOverflowType]="'overlay'"
  [backdrop]="true"
  [scrollable]="true"
  [showLoading]="showLoading"
>
  <thead dTableHead>
    <tr dTableRow>
      <th dHeadCell *ngFor="let colOption of colDataOptions">
        {{ colOption.header }}
      </th>
    </tr>
  </thead>
  <tbody dTableBody>
    <ng-template let-rowItem="rowItem">
      <tr dTableRow>
        <td dTableCell *ngFor="let colOption of colDataOptions">
          {{ colOption.fieldType === 'date' ? (rowItem[colOption.field] | i18nDate: 'short':false) : rowItem[colOption.field] }}
        </td>
      </tr>
    </ng-template>
  </tbody>
  <ng-template #noResultTemplateRef>
    <div style="text-align: center; margin-top: 20px">No Data</div>
  </ng-template>
</d-data-table>
